<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>课窝后台登录</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>

    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <link rel="stylesheet" href="./css/style.css">
    <style>
        table{
            width:100px;
            table-layout:fixed;
        }
        td{
            width:100%;
            word-break:keep-all;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
        }
        table span {
            color: black;
            font-size: 15px;
        }
    </style>
</head>

<body>
<div class="x-body ap">
    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
        <ul class="layui-tab-title">
            <li class="layui-this">市场部</li>
            <li>技术部</li>

        </ul>
        <div class="layui-tab-content" style="height: 100px;">
            <div class="layui-tab-item layui-show">
                <div class="layui-tab">
                    <ul class="layui-tab-title">
                        <li class="layui-this">本月绩效</li>
                        <li>历史绩效</li>
                    </ul>
                    <div class="layui-tab-content" style="height: 100px;">
                        <div class="layui-tab-item layui-show Achievements-time">
                            <xblock>
                                <span>2017年9月 <span>(工作日24天)</span> </span>
                                <button class="layui-btn layui-btn-small layui-btn-normal pg"><i class="layui-icon">&#xe63c;</i>
                                    评估
                                </button>
                                <button class="layui-btn layui-btn-small layui-btn-radius layui-btn-primary ok none">
                                    保存
                                </button>
                                <button class="layui-btn layui-btn-small layui-btn-radius layui-btn-primary no-ok none">
                                    取消
                                </button>
                                <div class="clear"></div>
                            </xblock>

                            <table class="layui-table">
                                <div id="showDiv" style="position: absolute;z-index: 999;width: 300px; background-color: white;"></div>
                                <thead>
                                <tr>
                                    <th>姓名</th>
                                    <th>职位</th>
                                    <th>出勤天数</th>
                                    <th>请假、调休</th>
                                    <th>加班</th>
                                    <th>薪资结构</th>
                                    <th>绩效工资</th>
                                    <th>备注</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td>张三丰</td>
                                    <td>市场专员</td>
                                    <td>22天</td>
                                    <td>一次 <span>（合计一天）</span></td>
                                    <td>一次 <span>（合计一天）</span></td>
                                    <td class="pi"  onmouseout="outHide()">的数量看到那肯定能深刻的大都市啊的数量看到那肯定能深刻的大都市啊的数量看到那肯定能深刻的大都市啊</td>
                                    <td class="sl">
                                        <span>231</span>
                                        <input type="text" class="layui-input" placeholder="请输入"
                                               value="">
                                    </td>
                                    <td class="sl">
                                        <span>sdsds</span>
                                        <input type="text" class="layui-input" placeholder="请输入"
                                               value="">
                                    </td>
                                </tr>


                                </tbody>
                            </table>
                            <!--分页-->
                            <div class="layui-row">
                                <div class="layui-col-md7 layui-col-md-offset2">
                                    <div class="page">
                                        <div>
                                            <a class="prev" href="">&lt;&lt;</a>
                                            <a class="num" href="">1</a>
                                            <span class="current">2</span>
                                            <a class="num" href="">3</a>
                                            <a class="num" href="">99</a>
                                            <a class="next" href="">&gt;&gt;</a>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="layui-tab-item Achievements-time">

                                <xblock>
                                    <span>2017年9月 <span>(工作日24天)</span> </span>
                                    <button class="layui-btn layui-btn-small layui-btn-normal pg"><i class="layui-icon">&#xe63c;</i>
                                        评估
                                    </button>
                                    <button class="layui-btn layui-btn-small layui-btn-radius layui-btn-primary ok none">
                                        保存
                                    </button>
                                    <button class="layui-btn layui-btn-small layui-btn-radius layui-btn-primary no-ok none">
                                        取消
                                    </button>
                                    <div class="clear"></div>
                                </xblock>

                                <table class="layui-table">
                                    <div id="showDiv" style="position: absolute;z-index: 999;width: 300px; background-color: white; "></div>
                                    <thead>
                                    <tr>
                                        <th>姓名</th>
                                        <th>职位</th>
                                        <th>出勤天数</th>
                                        <th>请假、调休</th>
                                        <th>加班</th>
                                        <th>薪资结构</th>
                                        <th>绩效工资</th>
                                        <th>备注</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td>张三丰</td>
                                        <td>市场专员</td>
                                        <td>22天</td>
                                        <td>一次 <span>（合计一天）</span></td>
                                        <td>一次 <span>（合计一天）</span></td>
                                        <td class="pi"  onmouseout="outHide()">的数量看到那肯定能深刻的大都市啊的数量看到那肯定能深刻的大都市啊的数量看到那肯定能深刻的大都市啊</td>
                                        <td class="sl">
                                            <span>231</span>
                                            <input type="text" class="layui-input" placeholder="请输入"
                                                   value="">
                                        </td>
                                        <td class="sl">
                                            <span>sdsds</span>
                                            <input type="text" class="layui-input" placeholder="请输入"
                                                   value="">
                                        </td>
                                    </tr>


                                    </tbody>
                                </table>
                                <!--分页-->
                                <div class="layui-row">
                                    <div class="layui-col-md7 layui-col-md-offset2">
                                        <div class="page">
                                            <div>
                                                <a class="prev" href="">&lt;&lt;</a>
                                                <a class="num" href="">1</a>
                                                <span class="current">2</span>
                                                <a class="num" href="">3</a>
                                                <a class="num" href="">99</a>
                                                <a class="next" href="">&gt;&gt;</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-tab-item ">
                <div class="layui-tab">
                    <ul class="layui-tab-title">
                        <li class="layui-this">本月绩效</li>
                        <li>历史绩效</li>
                    </ul>
                    <div class="layui-tab-content" style="height: 100px;">
                        <div class="layui-tab-item layui-show Achievements-time">
                            <xblock>
                                <span>2017年9月 <span>(工作日24天)</span> </span>
                                <button class="layui-btn layui-btn-small layui-btn-normal pg"><i class="layui-icon">&#xe63c;</i>
                                    评估
                                </button>
                                <button class="layui-btn layui-btn-small layui-btn-radius layui-btn-primary ok none">
                                    保存
                                </button>
                                <button class="layui-btn layui-btn-small layui-btn-radius layui-btn-primary no-ok none">
                                    取消
                                </button>
                                <div class="clear"></div>
                            </xblock>

                            <table class="layui-table">
                                <div id="showDiv" style="position: absolute;z-index: 999;width: 300px; background-color: white;"></div>
                                <thead>
                                <tr>
                                    <th>姓名</th>
                                    <th>职位</th>
                                    <th>出勤天数</th>
                                    <th>请假、调休</th>
                                    <th>加班</th>
                                    <th>薪资结构</th>
                                    <th>绩效工资</th>
                                    <th>备注</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td>张三丰</td>
                                    <td>市场专员</td>
                                    <td>22天</td>
                                    <td>一次 <span>（合计一天）</span></td>
                                    <td>一次 <span>（合计一天）</span></td>
                                    <td class="pi"  onmouseout="outHide()">的数量看到那肯定能深刻的大都市啊的数量看到那肯定能深刻的大都市啊的数量看到那肯定能深刻的大都市啊</td>
                                    <td class="sl">
                                        <span>231</span>
                                        <input type="text" class="layui-input" placeholder="请输入"
                                               value="">
                                    </td>
                                    <td class="sl">
                                        <span>sdsds</span>
                                        <input type="text" class="layui-input" placeholder="请输入"
                                               value="">
                                    </td>
                                </tr>


                                </tbody>
                            </table>
                            <!--分页-->
                            <div class="layui-row">
                                <div class="layui-col-md7 layui-col-md-offset2">
                                    <div class="page">
                                        <div>
                                            <a class="prev" href="">&lt;&lt;</a>
                                            <a class="num" href="">1</a>
                                            <span class="current">2</span>
                                            <a class="num" href="">3</a>
                                            <a class="num" href="">99</a>
                                            <a class="next" href="">&gt;&gt;</a>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="layui-tab-item Achievements-time">

                            <xblock>
                                <span>2017年9月 <span>(工作日24天)</span> </span>
                                <button class="layui-btn layui-btn-small layui-btn-normal pg"><i class="layui-icon">&#xe63c;</i>
                                    评估
                                </button>
                                <button class="layui-btn layui-btn-small layui-btn-radius layui-btn-primary ok none">
                                    保存
                                </button>
                                <button class="layui-btn layui-btn-small layui-btn-radius layui-btn-primary no-ok none">
                                    取消
                                </button>
                                <div class="clear"></div>
                            </xblock>

                            <table class="layui-table">
                                <div id="showDiv" style="position: absolute;z-index: 999;width: 300px; background-color: white; "></div>
                                <thead>
                                <tr>
                                    <th>姓名</th>
                                    <th>职位</th>
                                    <th>出勤天数</th>
                                    <th>请假、调休</th>
                                    <th>加班</th>
                                    <th>薪资结构</th>
                                    <th>绩效工资</th>
                                    <th>备注</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td>张三丰</td>
                                    <td>市场专员</td>
                                    <td>22天</td>
                                    <td>一次 <span>（合计一天）</span></td>
                                    <td>一次 <span>（合计一天）</span></td>
                                    <td class="pi"  onmouseout="outHide()">的数量看到那肯定能深刻的大都市啊的数量看到那肯定能深刻的大都市啊的数量看到那肯定能深刻的大都市啊</td>
                                    <td class="sl">
                                        <span>231</span>
                                        <input type="text" class="layui-input" placeholder="请输入"
                                               value="">
                                    </td>
                                    <td class="sl">
                                        <span>sdsds</span>
                                        <input type="text" class="layui-input" placeholder="请输入"
                                               value="">
                                    </td>
                                </tr>


                                </tbody>
                            </table>
                            <!--分页-->
                            <div class="layui-row">
                                <div class="layui-col-md7 layui-col-md-offset2">
                                    <div class="page">
                                        <div>
                                            <a class="prev" href="">&lt;&lt;</a>
                                            <a class="num" href="">1</a>
                                            <span class="current">2</span>
                                            <a class="num" href="">3</a>
                                            <a class="num" href="">99</a>
                                            <a class="next" href="">&gt;&gt;</a>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="./js/jquery-3.2.1.min.js"></script>
<script src="./lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="./js/xadmin.js"></script>
<script>
    $(".pi").mousemove(function () {
        var a=$(this).html();
        var showDiv = document.getElementById('showDiv');
        x=event.clientX;
        y=event.clientY;
        showDiv.style.left = x+"px";
        showDiv.style.top = y+"px";
        showDiv.style.display = 'block';
        showDiv.innerHTML = a;
    })


    function outHide() {
        var showDiv = document.getElementById('showDiv');
        showDiv.style.display = 'none';
        showDiv.innerHTML = '';
    }
    $(function () {
        $("table input").hide();
    })
    $(".pg").click(function () { //点击单元格输入
        $(this).hide();
        $(this).siblings("button").show();
        $(this).parent().siblings("table").find("input").show().siblings("span").hide();
        $(this).parent().siblings("table").find("input").change(function () {
            var a = $(this).val();//input里改变的值
//            $(this).siblings("span").html(a);
            var $this=$(this);
            $(".ok").click(function () {
//                保存
                $this.siblings("span").html(a);
                $(this).parent().siblings("table").find("input").hide().siblings("span").show();
                $(".pg").show();
                $(".ok").hide();
                $(".no-ok").hide();
                        layer.msg('已保存!', {
            icon: 1,
            time: 2000
        });
            })
            $(".no-ok").click(function () {
                $(this).parent().siblings("table").find("input").hide().siblings("span").show();
                $(".pg").show();
                $(".ok").hide();
                $(".no-ok").hide();
            })
        })
    })
//    $(".ok").click(function () {
//        $(".sl input").attr("disabled", "disabled");
//        layer.msg('已保存!', {
//            icon: 1,
//            time: 2000
//        });
//    })


</script>
</body>

</html>